<template>
    <div>
    <div class="goods">
      <!-- 左边商品  -->
      <div class="menu-wrapper">
        <ul class="ulBox" ref='ulBox'>
          <!--current 表示高亮-->
          <li class="menu-item" v-for="(good, index) in goods" :key="index"
              :class="{current: index===currentIndex}" @click="clickMenuItem(index)">
            <span class="text bottom-border-1px">
    <!--判断是否有小图标，如果有就加载，这里用到v-if=good.icon-->
              <img class="icon" :src="good.icon" v-if="good.icon">
              {{good.name}}
            </span>
          </li>
        </ul>
      </div>
      <!-- 右边商品  -->
      <div class="foods-wrapper">
        <ul ref="foodsUl" class="foodsUl">
          <li class="food-list-hook" v-for="(good, index) in goods" :key="index">
            <h1 class="title">{{good.name}}</h1>
            <ul>
              <li class="food-item bottom-border-1px" v-for="(food, index) in good.foods"
                  :key="index" @click="showFood(food)">
                <div class="icon">
                  <img width="57" height="57" :src="food.icon">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{food.price}}</span>
                    <span class="old" v-if="food.oldPrice">￥{{food.oldPrice}}</span>
                  </div>
                  <!-- 购物车 的商品计算 -->
                  <div class="cartcontrol-wrapper">
                    <CartControl :food="food"/>
                  </div>

                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- <ShopCart /> -->
    </div>
    <!-- <Food :food="food" ref="food"/> -->
  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
//引入购物车组件 
import CartControl from '../../../components/CartControl/CartControl'
//第一步引入
import BScroll from 'better-scroll'
export default {
    props: {

    },
    data() {
        return {
     tops:[],  //获取所有food里面的li滚出去的高度值
     scrollY:'' //获取实时滚动的高度

        };
    },
    computed: {
     ...mapState(['goods']),
    currentIndex(){
      let {tops,scrollY}=this
      let index=tops.findIndex((item,index)=>{
        return scrollY>=tops[index] &&scrollY<tops[index+1]
      })
      console.log(index);
      return index  //返回的是一个索引 
    }
    },
    created() {
 
    },
    mounted() { 

         this.$store.dispatch('getShopGoods',()=>{
           //下一次dom更新后执行
             this.$nextTick(()=>{
             this._getScroll() //更新后就会调用
             this._initfood()
           })

         })
      
        
    },
  

    methods: {
    // ...mapActions(['getShopGoods'])
      _getScroll(){
        //左边分类的商品滚动
      this.menuScroll=new BScroll('.menu-wrapper',{
        probeType:2,
        click:true //可以出发点击事件
        })
        //右边对应的类的商品列表滚动
      this.foodsScroll=new BScroll('.foods-wrapper',{
        probeType:2,
        click:true
      })
      
          //当用foodsScroll调用后，就可以监听到
              this.foodsScroll.on('scroll', (x,y)=>{
              // console.log(y)
              let scrolly=Math.abs(y)
              this.scrollY=scrolly //获取滚动实时的高度
            })

     //该方法返回x的绝对值，x的取值可以是各种类型参数。 
     // Math.abs(x)=|x|；如果参数是非负数，则返回该参数。如果参数是负数，则返回该参数的相反数。 
     // 特殊情况是： 
     // 如果参数是正零或负零，那么结果是正零。 
     // 如果参数是无穷大，那么结果是正无穷大。 
     // 如果参数是 NaN，那么结果就是 NaN。


           
           //滚动停止的时候当前的y的值 就是滚动的距离
           this.foodsScroll.on('scrollEnd',({x,y})=>{
             this.scrollY=Math.abs(y)
           })
      },
      //1.给右边的foods绑定滚动监听事件  目的，可以实时监听到滚动的高度
      //2.获取到滚动的高度，通过计算，然后来判断当前的高度在food整个盒子      的具体位置


      //第一步初始化高度
            _initfood(){
           let top=0;
           let tops=[];
           tops.push(top)
           let ul=this.$refs.foodsUl  //$refs可以获取到每一个ul
           //  console.log(ul);
           let lis=ul.children
           //把伪数组变成数组
           Array.from(lis,(li,index)=>{
             //拿到每个li的高度
             let liHeight=li.clientHeight; 
      //当第二个商品类显示高亮的时候，应该要加上前面的高度               
             top+=liHeight
             tops.push(top)
           })
          this.tops=tops
          //每个滚出去的高度
          console.log(this.tops);
      
            },
            clickMenuItem(index){
              //右边的商品详情滚动的高度值
         let top=this.tops[index]
         console.log(top);
      //  怎样触发右边滚动事件 并且让右边的商品滚动到该位置
      // scrollTo(x, y, time, easing) 最后一个参数不用写  
        this.foodsScroll.scrollTo(0,-top,100)
            } 
          },

//on(type, fn, context) 使用方法
// 参数：
// {String} type 事件名
// {Function} fn 回调函数
// {context} 函数执行的上下文环境，默认是 this
// 返回值：无
// 作用：监听当前实例上的自定义事件。如：scroll, scrollEnd, pullingUp, pullingDown等。
// 示例：
// import BScroll from 'better-scroll'
// let scroll = new BScroll('.wrapper')
// function onScroll(pos) {
//   console.log(`Now position is x: ${pos.x}, y: ${pos.y}`)
// }
// scroll.on('scroll', onScroll)


    components: {
    CartControl
    },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
 @import "../../../common/stylus/mixins.styl"
  .goods
    display: flex
    position: absolute
    top: 195px
    bottom: 46px
    width: 100%
    background: #fff;
    overflow: hidden
    .menu-wrapper
      flex: 0 0 80px
      width: 80px
      background: #f3f5f7
      .menu-item
        display: table
        height: 54px
        width: 56px
        padding: 0 12px
        line-height: 14px
        &.current
          position: relative
          z-index: 10
          margin-top: -1px
          background: #fff
          color: $green
          font-weight: 700
          .text
            border-none()
        .icon
          display: inline-block
          vertical-align: top
          width: 12px
          height: 12px
          margin-right: 2px
          background-size: 12px 12px
          background-repeat: no-repeat
        .text
          display: table-cell
          width: 56px
          vertical-align: middle
          bottom-border-1px(rgba(7, 17, 27, 0.1))
          font-size: 12px
    .foods-wrapper
      flex: 1
      .title
        padding-left: 14px
        height: 26px
        line-height: 26px
        border-left: 2px solid #d9dde1
        font-size: 12px
        color: rgb(147, 153, 159)
        background: #f3f5f7
      .food-item
        display: flex
        margin: 18px
        padding-bottom: 18px
        bottom-border-1px(rgba(7, 17, 27, 0.1))
        &:last-child
          border-none()
          margin-bottom: 0
        .icon
          flex: 0 0 57px
          margin-right: 10px
        .content
          flex: 1
          .name
            margin: 2px 0 8px 0
            height: 14px
            line-height: 14px
            font-size: 14px
            color: rgb(7, 17, 27)
          .desc, .extra
            line-height: 10px
            font-size: 10px
            color: rgb(147, 153, 159)
          .desc
            line-height: 12px
            margin-bottom: 8px
          .extra
            .count
              margin-right: 12px
          .price
            font-weight: 700
            line-height: 24px
            .now
              margin-right: 8px
              font-size: 14px
              color: rgb(240, 20, 20)
            .old
              text-decoration: line-through
              font-size: 10px
              color: rgb(147, 153, 159)
          .cartcontrol-wrapper
            position: absolute
            right: 0
            bottom: 12px
</style>
